//task 数据结构
// let tasks = [
//     {
//         id: 1, text: "睡觉", completed: false
//     },
//     {
//         id: 2, text: "吃饭", completed: true
//     },
//     {
//         id: 3, text: "打豆豆", completed: false
//     }
// ]
let tasks =JSON.parse(window.localStorage.getItem('task'));
console.log(tasks);

// 获取元素
let add = document.querySelector(".addTask .add");
let inputText = document.querySelector(".addTask input");
let ul = document.querySelector(".tasklist ul");
let category = document.querySelector(".category")
let inputSearch = document.querySelector(".search input")
let hideEdit = document.querySelector(".edit")
let cancel = document.querySelector(".cancel")
let sure = document.querySelector(".sure")
let update = document.querySelector(".edit input")
let modal = document.querySelector(".modal")

//
window.addEventListener("load", function () {
    //渲染
    renderTasks(tasks)
})

//添加按钮增加点击事件
add.addEventListener("click", function () {
    //数据添加
    //1.产生数据 = task对象
    //数组最后一个值加1
    let id;
    if(tasks.length == 0){
        id =1
    }else{
        id = tasks[tasks.length - 1].id + 1;
    }
    const task = { id: id, text: inputText.value, completed: false }
    //2.把对象放到tasks数组中
    if(inputText.value.trim()== ''){
        alert('任务不能为空');
    }else{
       tasks.push(task)
       inputText.value=''
    }
    saveToLoalStroage()
    renderTasks(tasks)
})

//三个按钮添加点击事件
// let allBtn = document.querySelector(".allBtn");
// let completedBtn = document.querySelector(".completedBtn");
// let uncompletedBtn = document.querySelector(".uncompletedBtn")
//全部
// allBtn.addEventListener("click",function(){
//     renderTasks(tasks)
// })
// //已完成
// completedBtn.addEventListener("click",function(){
//     renderTasks(tasks.filter(task =>task.completed))
// })
// // 未完成
// uncompletedBtn.addEventListener("click",function(){
//     renderTasks(tasks.filter(task =>!task.completed))
// })


//category添加事件-filter,判断是哪个按钮,事件委托
category.addEventListener("click",function(e){
    if(e.target.tagName == 'BUTTON'){
        //获取自定义属性中的值
        const filter = e.target.dataset.filter;
        //渲染过滤以后的task
        renderTasks(filterTasks(tasks,filter))
    }
})
// input :
/*
  功能：分类过滤函数
  输入：tasks-所有任务，filter[all,completed,uncompleted] 
  输出：过滤后的任务
*/
function filterTasks(tasks,filter) {
    switch (filter) {
      case "complete":
       return tasks.filter(task=>task.completed);
      case "uncomplete":
        return  tasks.filter(task=>!task.completed);
      default:
        return tasks;
    }
}

//搜索任务
// inputSearch.addEventListener("keydown",function(e){
//     //按下回车键
//     if(e.key == "Enter"){
//         //判断搜索框是否为空
//         if(inputSearch.value.trim()!=''){
//             let newTask = tasks.filter(function(task){
//                 return task.text.includes(inputSearch.value)
//             })
//             renderTasks(newTask)
//         }else{
//             //搜索框为空
//             alert("请输入搜索任务")
//         }
//     }
// })
inputSearch.addEventListener('input',function(e){
    if (inputSearch.value.trim() == '') {
        // 如果搜索框为空
        alert("请输入搜索任务")
    } else {
        // 根据搜索词过滤任务
        const filteredTasks = tasks.filter(task =>
            task.text.includes(inputSearch.value)
        );
        renderTasks(filteredTasks); // 显示过滤后的任务列表
    }
})

//渲染任务列表
function renderTasks(tasks) {
    //清空现有的ul中的li
    ul.innerHTML = ''
    tasks.forEach(task => {
        //创建一个元素
        const li = document.createElement("li")
        li.innerHTML = `
            <div class="left">
                <input type="checkbox" ${task.completed ? 'checked' : ''} data-id="${task.id}">
                <span class="${task.completed ? 'complete' : ''}">${task.text}</span>
            </div>
            <div class="btn-group">
                <button class="editBtn" data-id="${task.id}">编辑</button>
                <button class="delBtn" data-id="${task.id}">删除</button>
            </div>
        `

        //给删除添加点击事件
        // const delBtn = li.querySelector(".delBtn")
        // // delBtn.onclick = () => removeTask(task.id)
        // delBtn.addEventListener("click",function(e){
        //     removeTask(task.id,e)
        // })

        //编辑
        const editBtn = li.querySelector(".editBtn")
        editBtn.addEventListener("click",function(e){
            showEdit(task.id,e.target.parentElement.parentElement.querySelector("span").innerText)
            // hideEdit.style.display = "block"
            // //获取编辑框
            // document.querySelector(".edit input").value=e.target.parentElement.parentElement.querySelector("span").innerText
            // //确定，更新任务
            // sure.addEventListener("click",function(){
            //     hideEdit.style.display = "none"
            //     editTask(e)
            // })
            // //点击取消
            // cancel.addEventListener("click",function(){
            //     hideEdit.style.display = "none"
            // })
        })


        ul.appendChild(li);
    })
    count()
}

//底部统计数据
function count(){
    //生成统计数据
    let all = tasks.length;
    let completed = tasks.filter(task => task.completed).length;
    let uncompleted = all - completed
    
    //修改对应元素的数据
    let spans = document.querySelectorAll(".footer span");
    spans[0].textContent =`全部 ${all}`
    spans[1].textContent = `已完成 ${completed}`
    spans[2].textContent = `未完成 ${uncompleted}`
}


//使用时间委托处理删除操作
ul.addEventListener("click",function(e){
    removeTask(e)
    changeStatus(e)
    count()
})
// 删除函数
function removeTask(e){
    let li;
    if(e.target.classList.contains("delBtn")){
        //获取task的id值
        const id = e.target.dataset.id;
        tasks = tasks.filter(task => task.id != id)     
        li = e.target.parentElement.parentElement;
        // li.remove()
        ul.removeChild(li)  
        console.log(tasks);
    }
    saveToLoalStroage()
    // //删除数据
    // // console.log(id);
    // // tasks.splice(id,1)
    // tasks = tasks.filter(task => task.id != id)
    // //交互 移除数据
    // //e.target被点击的元素
    // const li = e.target.parentElement.parentElement
    // li.remove()

    // //重新渲染
    // // renderTasks(tasks)
    if(tasks.length == 0){
        ul.innerHTML =`<li class="over">任务列表为空,请添加</li>`
    }
}
//
function changeStatus(e){
    if(e.target.nodeName=="INPUT"){
        //获取task的id值
        const id = e.target.dataset.id;
        const task = tasks.find(task => task.id == id)
        task.completed = e.target.checked
        saveToLoalStroage()
        e.target.parentElement.children[1].classList.toggle("complete")  
    }
}

// //编辑函数
// function editTask(e){
//     e.target.parentElement.parentElement.querySelector("span").innerText = update.value
// }

function showEdit(id,defaultValue){
    //保存
    update.setAttribute("data-id",id);
    update.value=defaultValue;
    hideEdit.style.display="block"
    modal.style.display="block"
}
//确定修改
sure.onclick = function(){
    var newValue = update.value;
    let id = update.getAttribute('data-id')
    const task = tasks.find(task => task.id == id)
    task.text = newValue
    hideEdit.style.display = "none"
    modal.style.display="none"
    saveToLoalStroage()
    renderTasks(tasks)
}
//取消修改
cancel.onclick=function(){
    hideEdit.style.display = "none"
    modal.style.display="none"
}


//将数据保存到本地的函数
function saveToLoalStroage() {
    localStorage.setItem('task',JSON.stringify(tasks))
}

//获取本地保存的函数
function getLoalStroage(){
    return JSON.parse(localStorage.getItem('tasks'));
}